<template>
    <div style="background-color: rgb(245, 245, 245);">
        <headers></headers>
        <div class="title">
            <div class="auto">首页 > 认证考试 > 个人账户信息</div>
        </div>
        <div class="padding250" >
            <div class="auto content">
                <p class="titles">个人账户信息</p>
                <Form :label-width="80" inline ref="userInfoDetail" :rules="ruleValidate" class="forms" :model="userInfoDetail">
                    <div>
                        <FormItem label="姓名" prop="userName">
                            <Input placeholder="请输入您的姓名" v-model="userInfoDetail.userName" size="large" style="width: 245px" :disabled="passText == '已认证'" />
                        </FormItem>
                        <FormItem label="昵称" prop="nickName">
                            <Input placeholder="请输入您的昵称" v-model="userInfoDetail.nickName" size="large" style="width: 245px"/>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="手机号码" prop="mobile">
                            <Input placeholder="请输入您的手机号码" v-model="userInfoDetail.mobile" size="large"  style="width: 245px" :maxlength="11"/>
                        </FormItem>
                        <FormItem label="性别" prop="sex">
                            <Select v-model="userInfoDetail.sex + ''" size="large" style="width: 245px">
                                <Option value= "1" >女</Option>
                                <Option value= "2" >男</Option>
                            </Select>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="邮箱" prop="email">
                            <Input placeholder="请输入您的邮箱" v-model="userInfoDetail.email" size="large" style="width: 245px"/>
                        </FormItem>
                        <FormItem label="国籍" prop="nationality">
                            <Select size="large" style="width: 245px" v-model="userInfoDetail.nationality">
                                <Option v-for="item in nationalityArray" :value="item.name">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="民族" prop="nation">
                            <Select size="large" style="width: 245px" v-model="userInfoDetail.nation">
                                <Option v-for="item in nationList" :value="item.name">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="学习中心" prop="learnCenter">
                            <Select size="large" style="width: 245px" v-model="userInfoDetail.learnCenter">
                                <Option v-for="item in studyList" :value="item.name">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="联系地址" >
                            <al-cascader data-type="all" level="2" style="width:245px" @on-change="changeAddress"/>
                        </FormItem>
                        <FormItem label="详细地址" prop="address">
                            <Input :maxlength="200" show-word-limit type="textarea" v-model="userInfoDetail.address" placeholder="请输入您的联系地址" style="width: 245px"/>
                        </FormItem>
                    </div>
                    <div class="bottom">
                        <FormItem label="身份认证" prop="licenseStatus">
                            <a href="javascript:;" @click="authentication()">
                                <Input type="text" size="large" :placeholder="passText" icon="ios-arrow-forward" readonly style="width: 245px"/>
                            </a>
                            <!--<router-link to="/shenfen">
                                <Input type="text" size="large" :placeholder="passText" icon="ios-arrow-forward" readonly style="width: 245px"/>
                            </router-link>-->
                        </FormItem>
                        <FormItem label="教育经历" prop="edutionTag">
                            <a v-on:click="addEducation" href="javascript:;">
                                <Input type="text" size="large" :placeholder="edutionText" icon="ios-arrow-forward" readonly style="width: 245px"/>
                            </a>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="工作经历" prop="workTag">
                            <router-link to="/jobjingli">
                                <Input type="text" size="large" :placeholder="workText" icon="ios-arrow-forward" readonly style="width: 245px"/>
                            </router-link>
                        </FormItem>
                        <FormItem label="培训经历">
                            <router-link to="/peixun">
                                <Input type="text" size="large" :placeholder="trainText" icon="ios-arrow-forward" readonly style="width: 245px"/>
                            </router-link>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="持有证书">
                            <router-link to="/haszhengshu">
                                <Input type="text" size="large" :placeholder="certificatesCount + '个'" icon="ios-arrow-forward" readonly style="width: 245px"/>
                            </router-link>
                        </FormItem>
                    </div>
                    <Button type="primary" class="save" v-on:click="subUserInfo('userInfoDetail')">保存</Button>
                </Form>
            </div>
        </div>
        <footers></footers>
    </div>
</template>

<script type="text/ecmascript-6">
    import {getDicList, userInfo, updateUserInfo} from "../../http";
    import headers from '../template/header'
    import footers from '../template/footer'

    export default {
        name: 'kaoshiAccount',
        props: {},
        data() {
            return {
                showOrder: 'kaoshi',
                isAddress: 1,
                nationalityArray: [],//国家列表
                nationList: [],//民族列表
                studyList: [],//学习中心
                passText: '未认证',
                edutionText: '未填写',
                workText: '未填写',
                trainText: '未填写',
                certificatesCount: 0,//持有证书数量
                userInfoDetail: {
                    userName: '',
                    nickName: '',
                    mobile: '',
                    email: '',
                    nation: '',
                    sex: '',
                    learnCenter: '',//学习中心
                    nationality: '',
                    licenseStatus: '',
                    edutionTag: '',
                    identityTag: '',
                    workTag: '',
                    trainTag: '',
                    address: '',
                    cityString: ''
                },
                ruleValidate: {
                    email:[
                        {type: 'string',pattern : /^[\w\+\-]+(\.[\w\+\-]+)*@[a-z\d\-]+(\.[a-z\d\-]+)*\.([a-z]{2,4})$/ ,message:'邮箱格式不正确',trigger:'blur'}
                    ],
                    userName: [{ required: true, message: '姓名不能为空', trigger: 'blur'}],
                    mobile: [
                        {type: 'number',pattern : /^[1][2-9][0-9]{9}$/, required: true, message: '请输入您的手机号码', trigger: 'blur'}
                    ],
                    licenseStatus: [{required: true, message: '请认证身份', trigger: 'blur'}],
                    edutionTag: [{required: true, message: '请添加教育经历', trigger: 'blur'}],
                    workTag: [{required: true, message: '请添加工作经历', trigger: 'blur'}],
                    nationality: [{required: true, message: '请选择国籍', trigger: 'change'}],
                    nation: [{required: true, message: '请选择民族', trigger: 'change'}],
                    address: [{required: true, message: '请输入您的联系地址', trigger: 'blur'}]
                }
            };
        },
        methods: {
            addEducation(){
                if(this.edutionText == '未填写'){
                    this.$router.push({
                        name: 'addEducation',
                    })
                }else{
                    this.$router.push({
                        name: 'hasjiaoyu',
                    })
                }
            },
            changeAddress(v) {
                let city = ''
                v.forEach(function(element){
                    city = city + element.name + " "
                    console.info(element)
                });
                this.userInfoDetail.cityString = city.substring(0, city.length-1)
                console.info(this.userInfoDetail.cityString)
            },
            //民族列表
            getnation() {
                let that = this
                getDicList({dicType: 'nation'}).then(res => {
                    if(res.code == 200){
                        that.nationList = res.data
                    }
                })
            },
            //国家列表
            getstate() {
                let that = this
                getDicList({dicType: 'state'}).then(res => {
                    if(res.code == 200){
                        that.nationalityArray = res.data
                    }
                })
            },
            //学习中心
            getStudy() {
                let that = this
                getDicList({dicType: 'learnCenter'}).then(res => {
                    if(res.code == 200){
                        that.studyList = res.data
                    }
                })
            },
            getUserInfo() {
                let that = this
                userInfo().then(res => {
                    if(res.code == 200){
                        that.certificatesCount = res.data.certificatesCount
                        that.userInfoDetail = res.data.userInfo
                        if(res.data.userInfo.licenseStatus==1){
                            that.passText = '已认证'
                        }else{
                            that.passText = '未认证'
                        }
                        if(res.data.edutionTag==1){
                            that.edutionText = '已填写'
                            that.userInfoDetail.edutionTag = '1'
                        }else{
                            that.edutionText = '未填写'
                            that.userInfoDetail.edutionTag = ''
                        }
                        if(res.data.workTag==1){
                            that.workText = '已填写'
                            that.userInfoDetail.workTag = '1'
                        }else{
                            that.workText = '未填写'
                            that.userInfoDetail.workTag = ''
                        }
                        if(res.data.trainTag==1){
                            that.trainText = '已填写'
                        }else{
                            that.trainText = '未填写'
                        }
                        if(res.data.userInfo.mobile){
                            that.userInfoDetail.mobile = parseInt(res.data.userInfo.mobile)
                        }
                        if(res.data.userInfo.sex){
                            that.userInfoDetail.sex = res.data.userInfo.sex + ""
                        }else{
                            that.userInfoDetail.sex = "1"
                        }
                        if(that.userInfoDetail.cityString){
                            this.$nextTick(() => {
                                $(".ivu-cascader-rel .ivu-input-default").val(that.userInfoDetail.cityString)
                                console.info(res.data)
                                if(res.data.userInfo.nation == ''){
                                    that.userInfoDetail.nation = that.nationList[0].name
                                }
                                if(res.data.userInfo.nationality == ''){
                                    that.userInfoDetail.nationality = that.nationalityArray[0].name
                                }
                            });
                        }
                    }
                })
            },
            subUserInfo(name) {
                let that = this
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var params = {
                            userName:that.userInfoDetail.userName,
                            nickName:that.userInfoDetail.nickName,
                            sex:that.userInfoDetail.sex,
                            mobile:that.userInfoDetail.mobile,
                            email:that.userInfoDetail.email,
                            nationality:that.userInfoDetail.nationality,
                            learnCenter:that.userInfoDetail.learnCenter,
                            address:that.userInfoDetail.address,
                            nation:that.userInfoDetail.nation,
                            cityString: that.userInfoDetail.cityString
                        }
                        updateUserInfo(params).then(res => {
                            if(res.code == 200){
                                this.$Notice.success({
                                    title: '个人信息提醒',
                                    desc: '个人信息更新成功! ',
                                    duration: 3,
                                });
                                this.$router.push({
                                    name: 'startkaoshi',
                                })
                            }else{
                                this.$Notice.success({
                                    title: '个人信息提醒',
                                    desc: '个人信息更新失败 ',
                                    duration: 3,
                                });
                            }
                        })
                    }
                })
            },
            authentication() {
                if(this.userInfoDetail.licenseStatus == 0){
                    this.$router.push({
                        name: 'shenfen',
                        query:{
                            name: this.userInfoDetail.userName,
                        }
                    })
                }
                /*this.$Notice.warning({
                    title: '个人信息提醒',
                    desc: '请前往app端进行认证',
                    duration: 3,
                });*/
            }
        },
        created() {
            this.getUserInfo();
            this.getnation();
            this.getstate();
            this.getStudy();
        },
        components: {
            headers,
            footers
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    .ivu-input .ivu-input-default::-webkit-input-placeholder{
        color: red;
    }
    .title {
        font-size: 14px;
        color: #fff;
        height: 60px;
        line-height: 60px;
        background-color: #2F261E;
        text-align: left;
    }
    .bottom {
        border-top: 1px dashed #DBDBDB;
        padding-top: 30px;
    }

    .ivu-form-inline .addr .ivu-form-item {
        margin-bottom: 0;
    }

    .save {
        background-color: #B2936B;
        color: #fff;
        height: 50px;
        width: 200px;
        font-size: 16px;
        margin-left: 80px;
    }

    .content {
        background-color: #fff;
        margin-top: 30px;
        padding: 40px;
        text-align: left;

        .titles {
            font-size: 20px;
            color: #000;
            margin-bottom: 30px;
        }
    }
</style>
